<div class="p-h-md p-v bg-white box-shadow pos-rlt">
  <h3 class="no-margin">List Groups</h3>
</div>
<div class="p-md">
  <div class="row">
    <div class="col-sm-6">
      <h5 class="no-margin m-b">Ellipsis and Fade</h5>
      <ul class="list-group">
        <li class="list-group-item text-ellipsis text-info">
          One line ellipsis, Lorem ipsum dolor sit amet vibulum ullamcorper sodales nisi nec condimentum
        </li>
        <li class="list-group-item">
          <div class="text-fade h-2x">
            <span class="text-success">Two lines fade</span>, Lorem ipsum dolor sit amet vibulum ullamcorper sodales nisi nec condimentum Lorem ipsum dolor sit amet vibulum ullamcorper sodales nisi nec condimentum
          </div>
        </li>
        <li class="list-group-item">
          <div class="text-fade h-3x">
            <span class="text-primary">Three lines fade</span>, Lorem ipsum dolor sit amet vibulum ullamcorper sodales nisi nec condimentum Lorem ipsum dolor sit amet vibulum ullamcorper sodales nisi nec condimentum Vestibulum ullamcorper sodales nisi nec condimentum Mauris convallis mauris at pellentesque
          </div>
        </li>
        <li class="list-group-item">
          <div class="text-fade h-4x">
            <span class="text-black">Four lines fade</span>, Lorem ipsum dolor sit amet vibulum ullamcorper sodales nisi nec condimentum Lorem ipsum dolor sit amet vibulum ullamcorper sodales nisi nec condimentum Vestibulum ullamcorper sodales nisi nec condimentum Mauris convallis mauris at pellentesque
          </div>
        </li>
      </ul>
      <h5 class="no-margin m-b">Link and Background</h5>
      <div class="list-group bg-primary bg-inherit">
        <a href class="list-group-item">
          <span class="pull-right text-muted"><i class="glyphicon glyphicon-chevron-right"></i></span>
          Consectetur adipiscing elit.
        </a>
        <a href class="list-group-item">
          <span class="pull-right text-muted"><i class="glyphicon glyphicon-chevron-right"></i></span>
          Lorem ipsum dolor sit amet
        </a>
        <a href class="list-group-item">
          <span class="pull-right text-muted"><i class="glyphicon glyphicon-chevron-right"></i></span>
          Ullamcorper solli citudin venenatis ipsum 
        </a>
        <a href class="list-group-item">
          <span class="pull-right text-muted"><i class="glyphicon glyphicon-chevron-right"></i></span>
          Aliquam sodales nisi nec condimentum
        </a>
        <a href class="list-group-item">
          <span class="pull-right text-muted"><i class="glyphicon glyphicon-chevron-right"></i></span>
          Mauris at pellentesque
        </a>
      </div>
      <h5 class="no-margin m-b">Border</h5>
      <div class="list-group">
        <a href class="list-group-item b-l-primary">
          <span class="pull-right text-primary"><i class="fa fa-circle text-xs"></i></span>
          Border left primary
        </a>
        <a href class="list-group-item b-l-warning">
          <span class="pull-right text-warning"><i class="fa fa-circle text-xs"></i></span>
          Border left warning
        </a>
        <a href class="list-group-item b-l-success">
          <span class="pull-right text-success"><i class="fa fa-circle text-xs"></i></span>
          Border left success
        </a>
        <a href class="list-group-item b-l-danger">
          <span class="pull-right text-danger"><i class="fa fa-circle text-xs"></i></span>
          Border left danger
        </a>
        <a href class="list-group-item b-l-info">
          <span class="pull-right text-info"><i class="fa fa-circle text-xs"></i></span>
          Border left info
        </a>
      </div>
      <h5 class="no-margin m-b">Medium</h5>
      <div class="list-group list-group-md">
        <a href class="list-group-item">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit
        </a>
        <a href class="list-group-item">
          Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugia
        </a>
        <a href class="list-group-item">
          Vestibulum ullamcorper sodales nisi nec condimentum
        </a>
        <a href class="list-group-item">
          Donec eleifend condimentum nisl eu consectetur. Integer eleifend
        </a>
        <a href class="list-group-item">
          Lectus arcu malesuada sem
        </a>
      </div>
      <h5 class="no-margin m-b">Small and Gap</h5>
      <div class="list-group list-group-sm list-group-gap">
        <a href class="list-group-item">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit
        </a>
        <a href class="list-group-item">
          Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugia
        </a>
        <a href class="list-group-item">
          Vestibulum ullamcorper sodales nisi nec condimentum
        </a>
        <a href class="list-group-item b-l-warning">
          Sollicitudin venenatis ipsum ac
        </a>
        <a href class="list-group-item b-l-info">
          Donec eleifend condimentum nisl eu consectetur. Integer eleifend
        </a>
        <a href class="list-group-item b-success">
          Lectus arcu malesuada sem
        </a>
      </div>
    </div>
    <div class="col-sm-6">
      <h5 class="no-margin m-b">Title and Ellipsis</h5>
      <ul class="list-group">
        <li class="list-group-item">
          <div class="block font-bold">This is title</div>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </li>
        <li class="list-group-item active">
          <a href class="block font-bold">Title and link</a>
          <span class="text-muted">Morbi id neque quam</span>
        </li>
        <li class="list-group-item">
          <a href>
            <span class="block font-bold">Title and description link</span>
            Aliquam sollicitudin venenatis ipsum
          </a>
        </li>
        <li class="list-group-item">
          <a href><span class="block font-bold">Ellipsis description</span></a>
          <span class="clear text-ellipsis">Vestibulum ullamcorper sodales nisi nec condimentum Aliquam sollicitudin venenatis ipsum</span>
        </li>
        <li class="list-group-item">
          <a href class="clear text-ellipsis block font-bold">
            <span class="h5">
              Ellipsis title and description, ullamcorper sodales nisi nec condimentum Aliquam sollicitudin venenatis
            </span>
          </a>            
          <span class="clear text-ellipsis">Vestibulum ullamcorper sodales nisi nec condimentum Aliquam sollicitudin venenatis ipsum</span>          
        </li>
      </ul>
      <h5 class="no-margin m-b">Badge and Label</h5>
      <div class="list-group">
        <a href class="list-group-item">
          <span class="pull-right badge bg-info">12</span>
          Consectetur adipiscing elit.
        </a>
        <a href class="list-group-item">
          <span class="pull-right label bg-success">5</span>
          Lorem ipsum dolor sit amet
        </a>
        <a href class="list-group-item">
          <span class="pull-right text-muted m-l-xs"><i class="glyphicon glyphicon-chevron-right"></i></span>
          <span class="pull-right label bg-primary">4</span>
          Ullamcorper solli citudin venenatis ipsum 
        </a>
        <a href class="list-group-item">
          <span class="pull-right badge bg-danger">9</span>
          Aliquam sodales nisi nec condimentum
        </a>
        <a href class="list-group-item">
          <span class="pull-right badge bg-warning">10</span>
          Mauris at pellentesque
        </a>
      </div>
      <h5 class="no-margin m-b">Alternative</h5>
      <div class="list-group list-group-alt">
        <a href class="list-group-item">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit
        </a>
        <a href class="list-group-item active">
          Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugia
        </a>
        <a href class="list-group-item">
          Vestibulum ullamcorper sodales nisi nec condimentum
        </a>
        <a href class="list-group-item">
          Donec eleifend condimentum nisl eu consectetur. Integer eleifend
        </a>
        <a href class="list-group-item">
          Lectus arcu malesuada sem
        </a>
      </div>
      <h5 class="no-margin m-b">With Gap</h5>
      <div class="list-group list-group-gap">
        <a href class="list-group-item">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit
        </a>
        <a href class="list-group-item">
          Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugia
        </a>
        <a href class="list-group-item">
          Vestibulum ullamcorper sodales nisi nec condimentum
        </a>
        <a href class="list-group-item">
          Donec eleifend condimentum nisl eu consectetur. Integer eleifend
        </a>
        <a href class="list-group-item">
          Lectus arcu malesuada sem
        </a>
      </div>
      <h5 class="no-margin m-b">Media</h5>
      <ul class="list-group">
        <li class="list-group-item">
          <a href class="pull-left w-thumb m-r b-b b-b-2x b-success"><img src="images/a1.jpg" class="img-responsive"></a>
          <div class="clear">
            <a href class="font-bold block">Jonathan Doe</a>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit
          </div>
        </li>
        <li class="list-group-item">
          <a href class="pull-left w-thumb m-r b-b b-b-2x b-success"><img src="images/a2.jpg" class="img-responsive"></a>
          <div class="clear">
            <a href class="font-bold block">Jack Michale</a>
            Sectetur adipiscing elit
          </div>
        </li>
        <li class="list-group-item">
          <a href class="pull-left w-thumb m-r b-b b-b-2x b-warning"><img src="images/a3.jpg" class="img-responsive"></a>
          <div class="clear">
            <a href class="font-bold block">Jessi</a>
            Sectetur adipiscing elit
          </div>
        </li>
        <li class="list-group-item">
          <a href class="pull-left w-thumb m-r b-b b-b-2x"><img src="images/a4.jpg" class="img-responsive"></a>
          <div class="clear">
            <a href class="font-bold block">Sodake</a>
            Vestibulum ullamcorper sodales nisi nec condimentum
          </div>
        </li>
      </ul>      
    </div>
  </div>
</div>